<!-- components/login-reminder/login-reminder.vue -->
<template>
  <uni-popup ref="popup" type="dialog">
    <uni-popup-dialog
      mode="base"
      title="登录提示"
      content="亲爱的用户，该功能需要登录后才能使用哦~"
      :before-close="true"
      @confirm="handleConfirm"
      @close="handleClose"
    >
      <view class="login-reminder-content">
        <text class="reminder-text">登录后您可以：</text>
        <view class="benefits-list">
          <view class="benefit-item">
            <text class="icon">✓</text>
            <text>使用更多功能</text>
          </view>
          <view class="benefit-item">
            <text class="icon">✓</text>
            <text>保存个人数据</text>
          </view>
          <view class="benefit-item">
            <text class="icon">✓</text>
            <text>享受会员权益</text>
          </view>
        </view>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script>
export default {
  methods: {
    show() {
      this.$refs.popup.open()
    },
    hide() {
      this.$refs.popup.close()
    },
    handleConfirm() {
      // 跳转到登录页
      uni.navigateTo({
        url: '/pages/login/login'
      })
      this.hide()
    },
    handleClose() {
      this.hide()
    }
  }
}
</script>

<style scoped>
.login-reminder-content {
  padding: 20rpx 0;
}

.reminder-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.benefits-list {
  margin-top: 20rpx;
}

.benefit-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 26rpx;
  color: #333;
}

.benefit-item .icon {
  color: #07c160;
  margin-right: 10rpx;
  font-weight: bold;
}

:deep(.uni-popup-dialog) {
  border-radius: 16rpx;
}

:deep(.uni-popup-dialog__title) {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

:deep(.uni-popup-dialog__content) {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
</style>